<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="utf-8">
 <title>信息推送表</title>
 <meta name="renderer" content="webkit">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <link rel="stylesheet" href="../layui/css/layui.css" media="all">
<link href="favicon.ico" rel="shortcut icon">
</head>
<script src="../layui/layui.js" charset="utf-8"></script>

<body>

<table class="layui-hide" id="demo" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
  <div style="text-align:right;" class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">添加</button>
  </div>
</script>

<!-- 分页组件 -->
<div>
    <div id="page_container"></div>
</div>

<script>
layui.use(['table','layedit','form'], function(){
	  var table = layui.table;
	  var layedit = layui.layedit
	  ,$ = layui.jquery;
	  var form = layui.form   //form表单
	  
//执行一个 table 实例
	table.render({
	  elem: '#demo'
	  ,height: 'full-80'
	  //,cellMinWidth: 50
	  ,url: 'list' //数据接口
	  ,even:true	
	  //,page: true
	  //,title: '新闻表'
	  ,limit:20
	  ,toolbar:'#toolbarDemo'  //开启工具栏
	  ,cols: [
		  [ //表头
	    {field: 'msid', title: '序号', sort: true, fixed: 'left', width:200}
	    ,{field: 'title', title: '消息标题'}
	    ,{field: 'orgName', title: '接受组织'}
	    ,{field: 'context', title: '消息内容'}
	    ,{field: 'createtime', title: '发布时间'}
	   // ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
	 	 ]
		]
	});
	//头工具栏事件
	  table.on('toolbar(test)', function(obj){
		//目的:通过发送ajax请求得到栏目数据,虽然得到,但点击"添加"按钮触发事件之后发送ajax请求,打开一个表单又属于一个
		//事件,不可对后续事件造成影响(得到的数据现不可用,后续可以试试回调函数)
/* 		layui.$.ajax({  
			url: 'topics'
			,type: 'get'
		});   */
		
		layer.open({
			type:1,
			title:'添加新闻',
			area: ['1100px', '650px'],
			anim: 0,
			skin: 'layui-layer-molv',
			content:layui.$('#add')
		});
		
	  });
	});
</script>


<!------------------------------------------------ 添加 --------------------------------------------------->
<form id="add" class="layui-form" action="add" lay-filter="example" method="post" hidden="true">
  <div class="layui-form-item">
    <label class="layui-form-label">消息标题</label>
    <div class="layui-input-block">
      <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入消息标题" class="layui-input">
    </div>
  </div>  
  
  <div class="layui-form-item">
  	<label class="layui-form-label">接受组织:</label><br/><br/>
  	<div class="layui-input-block" th:each="o,userStat:${ovo}">
  		<input type="checkbox" name="oids" th:value="${o.oid}" th:title="${o.oname}" lay-skin="primary">
  	</div>
  	
  </div>
  
  
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">消息内容</label>
    <div class="layui-input-block">
      <textarea placeholder="请输入内容" style="font-size:120%;" class="layui-textarea" name="context"></textarea>
    </div>
  </div>

  <div class="layui-form-item" style="margin-top:20px;">
    <div class="layui-input-block" >
      <button class="layui-btn site-demo-layedit" data-type="content">确认添加</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>



<!---------------------------------------------- 分页栏目 --------------------------------------------------->
<script>
layui.use('laypage', function(){
  var laypage = layui.laypage;
  //执行一个laypage实例
  laypage.render({
    elem: 'page_container' 
    	,count: 26
    	,skip: true //开启跳页
        ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
        ,jump: function(obj,first){
        	if(!first){
                layer.msg('第'+ obj.curr +'页', {offset: 'b'});
              }
        }
  });
});
</script>

</body>
</html>